<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        /* 表格样式：合并边框 + 上下边距10px + 左右自动居中 */
        table {
            border-collapse: collapse;
            margin: 10px auto;
        }
        /* 表格单元格样式：添加边框 + 内边距 */
        td {
            border: 1px solid #000;
            padding: 6px;
        }
        /*  section 标题样式：加粗 + 居中 */
        .section-title {
            font-weight: bold;
            text-align: center;
        }
        /* 页面主标题居中 */
        h2 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h2>用户注册</h2>
    <form action="" method="post">
        <!-- 身份验证-必填信息 区域 -->
        <table>
            <tr>
                <td colspan="2" class="section-title">身份验证-必填信息</td>
            </tr>
            <tr>
                <td>用户名</td>
                <td><input type="text" name="username"></td>
            </tr>
            <tr>
                <td>密 码</td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td>密码确认</td>
                <td><input type="password" name="passwordConfirm"></td>
            </tr>
        </table>

        <!-- 身份信息-选填信息 区域 -->
        <table>
            <tr>
                <td colspan="2" class="section-title">身份信息-选填信息</td>
            </tr>
            <tr>
                <td>所在城市</td>
                <td><input type="text" name="city"></td>
            </tr>
            <tr>
                <td>工作单位</td>
                <td><input type="text" name="workUnit"></td>
            </tr>
            <tr>
                <td>家庭住址</td>
                <td><input type="text" name="homeAddress"></td>
            </tr>
        </table>

        <!-- 其他个人信息 区域 -->
        <table>
            <tr>
                <td colspan="2" class="section-title">其他个人信息</td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <select name="gender">
                        <option value="male">男孩</option>
                        <option value="female">女孩</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" name="hobby" value="music">音乐
                    <input type="checkbox" name="hobby" value="sports">体育
                    <input type="checkbox" name="hobby" value="computer" checked>计算机
                </td>
            </tr>
            <tr>
                <td>喜欢的公司</td>
                <td>
                    <input type="radio" name="favCompany" value="baidu">百度
                    <input type="radio" name="favCompany" value="microsoft">微软中国
                    <input type="radio" name="favCompany" value="google">谷歌中国
                </td>
            </tr>
            <tr>
                <td>个人简介</td>
                <td><textarea name="intro" rows="5" cols="30"></textarea></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="提交您的资料">
                    <input type="reset" value="重新填写资料">
                    <input type="button" value="无效按钮" disabled>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>